<template>
  <view v-if="isShow" class="popup-overlay" @click="handleClick">
    <view :class="{ 'shrink-animation-finish': isClicked, 'scale-animation': isShow }">
      <image  mode="widthFix"
              :src="`https://td.lszbg.com/public/uploads/h5/home/first_user_bg.png`"></image>
      <view class="user-first-money1">
        <view class="user-first-money">
        </view>
        <view style="font-weight: bold;font-size: 46rpx;color: #FFFFFF;text-align: center;letter-spacing: 6rpx">获得额外{{FristOrder}}元奖励</view>
      </view>

      <!--    关闭按钮-->
      <view v-if="isShow & !isClicked" class="happy-btn delet-btn">
        <u-icon name="close-circle" color="#FFFFFF" size="50"></u-icon>
        <!--<image mode="widthFix" style="width: 60rpx;height: 60rpx;" src="http://yyadmin.laimeitong.com/images/delet.png"></image>-->
      </view>
    </view>


  </view>
</template>
<script>
const app = getApp();
import newUserRewardApi from '@/api/newUserReward.js'
export default {
  data() {
    return {
      isClicked: false,
      isShow: false,
      BestImgUrl: app.globalData.imgurl,
      FristOrder: '', //首单奖励新人专享
    }
  },

  mounted() {
    this.ImproveFirstUser()
  },
  methods: {
    ImproveFirstUser (){
      newUserRewardApi.getImproveUserInfo().then(res => {
        const data = res.data.result;
        this.FristOrder = Math.floor(data[2].amount);
        // console.log("完善信息=",data)
      })
    },
    showUp() {
      this.isShow = true;
    },
    handleClick() {
      this.isClicked = true;

      // 可选：动画结束后移除元素
      setTimeout(() => {
        // this.$destroy() // 根据实际需求决定是否要销毁组件
        this.isShow = false;
        this.isClicked = false
        this.$emit('closeFinsh')
      }, 1000)
    }
  }
}
</script>
<style lang="scss">
@import "./css/index-xg.css";
@import "./css/animation.css";

.delet-btn {
  position: absolute;
  text-align: center;
  justify-content: center;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
}
.user-first-money1{
  position: absolute;
  //top: 160rpx;
  top: 20%;
  width: 100%;
  z-index: 5;
}
//首单奖励金额css
.user-first-money{
  width: 428rpx;
  height: 98rpx;
  margin: 0 auto;
  background-image: url("https://td.lszbg.com/public/uploads/h5/home/new_user_wenzi.png");
  background-repeat: no-repeat;
  background-size: cover;
}
//top: 32%;
//z-index: 10;
//font-weight: bold;
//font-size: 60rpx;
//color: #FFFFFF;
//margin-left: 48%;
.shrink-animation-finish {
  animation: shrinkOutFinish 0.8s ease-in forwards;
  position: fixed !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@keyframes shrinkOutFinish {
  from {
    transform: scale(1) translate(-50%, -50%);
    opacity: 1;
  }

  to {
    top: 50%;
    left: 50%;
    transform: scale(0) translate(100%, 100%);
    opacity: 0;
  }
}
</style>